@import "_reset.scss";
@import "_common.scss";


@mixin comp($key,$val) {
    -ms-#{$key}:$val;
    -moz-#{$key}:$val;
    -webkit-#{$key}:$val;

}

$centenWidth:1124px;

.narBar{
    width: $centenWidth;
    height: 40px;
    background-color: #7e8c8d;
    margin: 0 auto;
    .nar{
        float: left;
        &>ul{
            display: flex;
            &>li{
                width: 40px;
                height: 40px;
                a{
                    display: block;
                    width: 40px;
                    height: 40px;
                    font-size: 15px;
                    color: goldenrod;
                    line-height: 40px;
                    text-align: center;
                }
                ul{
                    width: 40px;
                    height: 0;
                    text-align: center;
                    line-height: 40px;
                    overflow: hidden;
                    @include comp(transition, all 0.5s 0s linear);
                  li{
                    width: 40px;
                    height: 40px;
                    background-color:$purple ;
                  }
                }
                &:hover a{
                    background-color: $primary;
                }
                &:hover ul {
                    height: 160px;
                }
            }
        }
    }
    .bar{
        float: right;
    }
}

